<template>
  <div class="login_container">
    <el-dialog v-model="userStore.visiable" title="用户登录" width="700" @close="close">
      <div class="content">
        <el-row :gutter="20">
          <el-col :span="12" v-show="!wechatLogin">
            <div class="login">
              <el-form ref="formRef" :model="loginParams" :rules="rules">
                <el-form-item prop="phone">
                  <el-input
                    :prefix-icon="User"
                    v-model="loginParams.phone"
                    placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                  <el-input
                    :prefix-icon="Lock"
                    v-model="loginParams.code"
                    placeholder="请输入验证码"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="info"
                    plain
                    @click="getUserCode"
                    :disabled="!isPhone && !showTime ? true : false"
                    >获取验证码
                    <span v-show="showTime"> （{{ time + 's' }}） </span>
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    style="width: 100%"
                    :disabled="!isPhone || loginParams.code.length != 6"
                    @click="handleLogin"
                    >登录</el-button
                  >
                </el-form-item>
              </el-form>
              <div class="wechat">
                <p>微信扫码登录</p>
                <svg
                  @click="changeScene"
                  t="1726714693786"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4282"
                  width="32"
                  height="32">
                  <path
                    d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                    fill="#28C445"
                    p-id="4283"></path>
                  <path
                    d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                    fill="#28C445"
                    p-id="4284"></path>
                </svg>
              </div>
            </div>
          </el-col>
          <el-col :span="12" v-show="wechatLogin">
            <div id="wx_login_container" class="wechat-login">
              <p class="info">使用微信扫一扫登录</p>
              <p class="info">"尚硅谷"</p>
              <p class="phone-tip">手机短信验证码登录</p>
              <svg
                @click="wechatLogin = false"
                t="1726715905062"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="12071"
                width="32"
                height="32">
                <path
                  d="M512.1 512.4m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z"
                  fill="#BF67E8"
                  p-id="12072"></path>
                <path
                  d="M619.9 796.8H404.2c-23.8 0-43.3-19.5-43.3-43.3V271.2c0-23.8 19.5-43.3 43.3-43.3h215.7c23.8 0 43.3 19.5 43.3 43.3v482.3c0 23.9-19.5 43.3-43.3 43.3z"
                  fill="#FFFFFF"
                  p-id="12073"></path>
                <path
                  d="M623.2 734H401c-7.7 0-13.9-6.2-13.9-13.9V304.7c0-7.7 6.2-13.9 13.9-13.9h222.2c7.7 0 13.9 6.2 13.9 13.9v415.4c0 7.7-6.2 13.9-13.9 13.9z"
                  fill="#BF67E8"
                  p-id="12074"></path>
                <path
                  d="M512.1 765.8m-15.8 0a15.8 15.8 0 1 0 31.6 0 15.8 15.8 0 1 0-31.6 0Z"
                  fill="#BF67E8"
                  p-id="12075"></path>
                <path
                  d="M550.2 474.4c1-0.5 1.4-1.7 0.9-2.7-1.4-3.3-5.7-9.5-17.3-9.5-15.8 0-21.6 5.7-21.6 5.7s-4.1-5.7-21.6-5.7-25.1 23.5-21.3 42.3c4.1 20.2 17.5 39.6 25.9 39.6s10.9-4.6 18-4.6 12.3 4.6 18.3 4.6 13.1-5.2 18-13.4c3.4-5.7 5.3-11.5 6.1-14.6 0.3-1.1-0.3-2.2-1.4-2.6-4.1-1.3-13.1-5.6-13.1-19.2 0.1-13.1 6.2-18.2 9.1-19.9zM532.4 435.2c1.6-0.3 3.1 1 3 2.6-0.3 3.8-1.4 10.3-5.6 15.1-4.2 4.8-10.5 6.8-14.2 7.6-1.6 0.3-3.1-1-3-2.6 0.3-3.8 1.4-10.3 5.6-15.1 4.2-4.9 10.5-6.8 14.2-7.6z"
                  fill="#BF67E8"
                  p-id="12076"></path>
                <path
                  d="M522.8 263.5H473c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5h49.8c2.5 0 4.5 2 4.5 4.5s-2 4.5-4.5 4.5z"
                  fill="#BF67E8"
                  p-id="12077"></path>
                <path
                  d="M548.1 259.5m-5 0a5 5 0 1 0 10 0 5 5 0 1 0-10 0Z"
                  fill="#BF67E8"
                  p-id="12078"></path>
              </svg>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="scan">
              <div class="wechat">
                <img class="icon img" src="../../assets/images/code.png" alt="" />
                <svg
                  t="1726714860542"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4495"
                  width="32"
                  height="32">
                  <path
                    d="M615.904 388.48c8.8 0 17.536 0.64 26.176 1.6-23.52-109.536-140.608-190.912-274.272-190.912C218.4 199.2 96 301.056 96 430.4c0 74.656 40.736 135.936 108.768 183.488l-27.2 81.792 95.04-47.648c33.984 6.72 61.28 13.632 95.2 13.632 8.544 0 16.992-0.416 25.376-1.088a202.496 202.496 0 0 1-8.384-56.96c0-118.752 101.984-215.136 231.104-215.136zM469.76 314.784c20.48 0 34.016 13.472 34.016 33.92 0 20.352-13.536 34.016-34.016 34.016-20.384 0-40.832-13.664-40.832-34.016 0-20.448 20.448-33.92 40.832-33.92zM279.52 382.72c-20.384 0-40.928-13.664-40.928-34.016 0-20.448 20.544-33.92 40.928-33.92 20.352 0 33.92 13.472 33.92 33.92 0 20.384-13.568 34.016-33.92 34.016z"
                    fill="#707070"
                    p-id="4496"></path>
                  <path
                    d="M864 600.352c0-108.672-108.736-197.28-230.88-197.28-129.344 0-231.2 88.576-231.2 197.28 0 108.864 101.856 197.248 231.2 197.248 27.072 0 54.368-6.816 81.568-13.632l74.56 40.8-20.448-67.904C823.328 715.936 864 661.664 864 600.352z m-305.856-34.016c-13.536 0-27.2-13.44-27.2-27.2 0-13.568 13.664-27.2 27.2-27.2 20.576 0 34.016 13.632 34.016 27.2 0 13.76-13.44 27.2-34.016 27.2z m149.536 0c-13.44 0-27.008-13.44-27.008-27.2 0-13.568 13.568-27.2 27.008-27.2 20.352 0 34.016 13.632 34.016 27.2 0 13.76-13.664 27.2-34.016 27.2z"
                    fill="#707070"
                    p-id="4497"></path>
                </svg>
                <span>微信扫一扫关注</span>
                <span>"快速预约挂号"</span>
              </div>
              <div class="wechat">
                <img class="icon img" src="../../assets/images/code.png" alt="" />
                <svg
                  t="1726714885902"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="6661"
                  width="32"
                  height="32">
                  <path
                    d="M798.723234 174.782745c0-60.576657-49.106418-109.683075-109.683075-109.683075l-354.708628 0c-60.576657 0-109.683075 49.106418-109.683075 109.683075l0 673.980161c0 60.576657 49.106418 109.683075 109.683075 109.683075l354.708628 0c60.576657 0 109.683075-49.106418 109.683075-109.683075L798.723234 174.782745zM264.557398 237.015112l494.256894 0 0 529.049305-494.256894 0L264.557398 237.015112zM334.356091 105.008612 689.016623 105.008612c38.548968 0 69.798692 31.249725 69.798692 69.798692l0 22.298865-494.256894 0 0-22.298865C264.557398 136.25936 295.807123 105.008612 334.356091 105.008612zM689.016623 918.53704 334.356091 918.53704c-38.548968 0-69.798692-31.249725-69.798692-69.798692l0-43.788296 494.256894 0 0 43.788296C758.814292 887.287315 727.564567 918.53704 689.016623 918.53704z"
                    fill="#707070"
                    p-id="6662"></path>
                  <path
                    d="M513.173732 829.943282c-16.70752 0-30.30112 13.5936-30.30112 30.30112 0 16.70752 13.5936 30.30112 30.30112 30.30112s30.299073-13.5936 30.299073-30.30112C543.472805 843.536882 529.881253 829.943282 513.173732 829.943282z"
                    fill="#707070"
                    p-id="6663"></path>
                </svg>
                <span>微信扫一扫关注</span>
                <span>"快速预约挂号"</span>
              </div>
            </div>
            <p class="tip">XXXXX官方指定平台</p>
            <p class="tip">快速挂号,安全放心</p>
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="userStore.visiable = false">关闭窗口</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref, computed } from 'vue'
import { reqGetWxLoginParam } from '@/api/user'
// 获取store
import { useRouter, useRoute } from 'vue-router'
import useUserStore from '@/store/modules/user'

const $router = useRouter()
const $route = useRoute()
const userStore = useUserStore()

import { reqGetCode } from '@/api/user'
const wechatLogin = ref(false)
// 用户手机号
let loginParams = ref({
  phone: '',
  code: ''
})
// 倒计时
let time = ref(60)
// 显示倒计时
let showTime = ref(false)
// interval
let interval = 0
// 获取验证码接口
const getUserCode = async () => {
  const { data } = await reqGetCode(loginParams.value.phone)
  loginParams.value.code = data + ''
  time.value = 60
  showTime.value = true
  interval = setInterval(() => {
    time.value--
    if (time.value <= 0) {
      clearInterval(interval)
      showTime.value = false
    }
  }, 1000)
}
let formRef = ref()
// 登录
const handleLogin = async () => {
  // 校验是否符合条件
  console.log($route.query)
  await formRef.value.validate()
  await userStore.userLogin(loginParams.value)
  console.log($route.query.redirect)
  if ($route.query.redirect) {
    console.log('登录，，，，，，，')
    $router.push($route.query.redirect as string)
  }
}

// 手机号码校验
const phoneNumberValidator = (_: any, value: any, callback: any) => {
  if (isValidPhoneNumber(value)) {
    callback()
  } else {
    callback(new Error('请正确输入手机号'))
  }
}

const rules = {
  phone: [{ trigger: 'change', validator: phoneNumberValidator }],
  code: [
    { required: true, message: '请输入验证码', trigger: 'change' },
    { min: 6, max: 6, message: '请输入6位验证码', trigger: 'change' }
  ]
}

const close = () => {
  console.log('zhixing')
  Object.assign(loginParams.value, {
    phone: '',
    code: ''
  })
  formRef.value.resetFields()
}

const isValidPhoneNumber = (phoneNumber: string) => {
  const regex = /^(13[0-9]|14[5|7|9]|15[0-3|5-9]|16[2|5|6|7]|17[0-8]|18[0-9]|19[8|9])\d{8}$/
  return regex.test(phoneNumber)
}
const isPhone = computed(() => isValidPhoneNumber(loginParams.value.phone))

const changeScene = async () => {
  wechatLogin.value = !wechatLogin.value
  // 生成微信扫码登录二维码页面
  if (wechatLogin.value) {
    let wxRedirectUri = encodeURIComponent(window.location.origin)
    const { data } = await reqGetWxLoginParam(wxRedirectUri)
    // @ts-ignore
    var obj = new WxLogin({
      self_redirect: true,
      id: 'wx_login_container',
      appid: data.appid,
      scope: data.scope,
      redirect_uri: encodeURIComponent('http://forum.atguigu.cn/api/weixinPc/callback'),
      state: 'syt-null',
      style: 'black',
      href: ''
    })
  }
}
</script>

<style lang="scss" scoped>
.login_container {
  // :deep(.el-dialog__body) {
  //   // border-top: 1px solid #ccc;
  //   // border-bottom: 1px solid #ccc;
  // }
  .content {
    .login {
      border: 1px solid #efefef;
      padding: 20px;
      border-radius: 4px;
    }
    .wechat {
      text-align: center;
      cursor: pointer;
      p {
        margin-bottom: 10px;
      }
    }

    .wechat-login {
      display: flex;
      align-items: center;
      flex-direction: column;
      border: 1px solid #efefef;
      padding-bottom: 20px;
      border-radius: 4px;
      .title {
        font-size: 18px;
        margin: 10px 0 5px 0;
      }
      .img {
        width: 180px;
        height: 180px;
        margin-bottom: 10px;
      }
      .info {
        font-size: 14px;
        line-height: 20px;
      }
      .phone-tip {
        font-size: 14px;
        color: #999;
        margin: 10px 0;
      }
      .icon {
        cursor: pointer;
      }
    }

    .scan {
      display: flex;
      margin-bottom: 20px;
      .wechat {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        .icon {
          width: 25px;
          &.img {
            width: 150px;
          }
        }
        span {
          display: inline-block;
          line-height: 24px;
        }
      }
    }
    .tip {
      font-size: 18px;
      text-align: center;
      font-style: italic;
      line-height: 30px;
    }
  }
}
</style>
